<template>
	<view v-if="customerShow" class="customer_view flex align-center justify-between" @tap.stop="JumpCustomer">
		<view class="customer_le">
			<image :src='STATIC_URL+"5.png"'></image>
		</view>
		<view class="customer_ce">
			<view class="customer_ce_1 flex align-center">
				<text>在线咨询客服</text>
				<!-- <text class="customer_ce_1_1">1对1</text> -->
				<!-- <text>客服微信</text> -->
				<!-- <image class="customer_ce_img" :src='STATIC_URL+"208.png"' mode="aspectFill"></image> -->
				<u-icon name="arrow-right" size="24" color="#333"
					style="margin-left: 8rpx;transform: translateY(3rpx);"></u-icon>
			</view>
			<view class="customer_ce_2">领取租车福利~</view>
		</view>
		<view class="customer_ri" @tap.stop="closeCustomer">
			<u-icon name="close-circle" size="32" color="#999"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			source: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				customerShow: false
			}
		},
		created() {

		},
		compont: {
			computedProp() {
				return this.source; // 这里可以根据需要进行复杂的逻辑处理
			}
		},
		watch: {
			source: {
				handler(newl){
					let customerStatus = this.$store.state.customerStatus;
					customerStatus.forEach(item => {
						if (item.type == newl) {
							if (item.status) {
								this.customerShow = true;
							} else {
								this.customerShow = false;
							}
						}
					})
				},
				immediate: true
			}
		},
		methods: {
			JumpCustomer() {
				let data = {
					user_id: global.userInfo ? global.userInfo.user_id : 0,
					point_id: this.source
				}
				this.$store.dispatch('submitCustomer', data);
				this.$store.commit('openCustomer');
			},
			closeCustomer() {
				this.customerShow = false;
				this.$store.commit('changeCustomer', this.source);
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.customer_view {
		height: 112rpx;
		padding: 20rpx 48rpx;
		background: #F4FFF3;

		.customer_le {
			width: 60rpx;
			height: 48rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.customer_ce {
			flex: 1;
			padding: 0 28rpx;

			.customer_ce_1 {
				font-size: 30rpx;

				.customer_ce_1_1 {
					display: inline-block;
					font-weight: 600;
					position: relative;
				}

				.customer_ce_1_1::after {
					content: "";
					background: #01D662;
					width: 52rpx;
					height: 6rpx;
					border-radius: 10rpx;
					position: absolute;
					bottom: 6rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: -1;
				}
			}

			.customer_ce_2 {
				font-size: 24rpx;
				color: #999;
			}

			.customer_ce_img {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>